<!-- 评价 -->
<template>
	<view class="page">
		<u-navbar :isFixed="true" title="我的求购" :borderBottom="false"></u-navbar>
		<go-top :scrollTop="scrollTop"></go-top>
		<view class="tabs">
			<u-tabs :list="tabs" :is-scroll="false" :current="order_type" @change="settab" bg-color="#F8F8F8"
				active-color="#38BE8C" bar-width="60"></u-tabs>
		</view>
		<view class="wrap">
			<view class="total" v-if="total>0">共{{total}}个</view>
			<block v-for="(item,index) in list" :key="index">
				<view class="card">
					<navigator :url="'/home/index/wantedetail?id='+item.id" hover-class="none">
						<view class="flex_bet_align">
							<view class="goodsName clamp1">{{item.titles}}</view>
							<navigator :url="'/personal/offerList?id='+item.id" hover-class="none" class="btn reOffer"
								v-if="item.getdemandoffer_count>0">{{item.getdemandoffer_count}}个报价</navigator>
							<view class="notoffer" v-else>暂无报价</view>
						</view>
						<view class="text">采购数量：{{item.number}}{{item.unit}} | {{item.stoptime}}截止</view>
						<view class="text address clamp3">求购地区：四川省成都市温江区</view>
						<view class="msg flex_align">
							<view>{{item.view_num}}人查看</view>
							<view>刷新时间：{{item.createtime}}</view>
						</view>
					</navigator>
					<view class="flex_align btnGroup">
						<view class="btn del" @click="cancel(item.id)" v-if="order_type==0">取消</view>
						<view class="btn refresh" v-if="order_type==1" @click="refreshdemand(item.id)">刷新</view>
						<view class="btn reOffer" v-if="order_type==3" @click="cancel(item.id)">重新发布
						</view>
						<view class="btn edit" v-if="order_type==0||order_type==3" @click="updata(item.id)">编辑</view>
						<view class="btn del" v-if="order_type==3" @click="deleteSupply(item.id)">删除</view>
					</view>
				</view>
			</block>
		</view>
		<view class="not_more" v-if="list.length<1">
			<image src="../static/img/wdingdan.png" mode="widthFix"></image>
			<view class="text">暂无订单</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
		<view style="height:130rpx;"></view>
		<view class="foot flex_align">
			<view @click="refreshdemands" v-if="order_type==0&&list.length>0">一键刷新</view>
			<view @click="deleteall" v-if="order_type==1&&list.length>0">一键清空</view>
			<view @click="updata(0)" class="green">发布求购</view>
		</view>
	</view>
</template>

<script>
	var _this, $paginator, shak;
	export default {
		data() {
			return {
				tabs: [{
					name: '未报价'
				}, {
					name: '报价中'
				}, {
					name: '已完成'
				}, {
					name: '已截止'
				}],
				order_type: 0,
				list: [],
				nomore: false,
				scrollTop: 0,
				total: 0,
			}
		},
		onLoad() {
			_this = this
		},
		onShow() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		//下拉刷新
		onPullDownRefresh() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			// 刷新本页
			isonshow() {
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
			getdata: function(firstLoad = false) {
				$paginator.getData('supplyoffer', {
					status: _this.order_type + 1
				}, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 300
						})
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.total = data.total
					_this.nomore = data.nomore
				})
			},
			// 切换
			settab(e) {
				console.log(e)
				_this.click_shake(function() {
					_this.order_type = e
					_this.list = []
					$paginator = new _this.$paginator(_this.$api)
					_this.getdata(true)
				})
			},
			// 跳转编辑求购
			updata(id) {
				uni.navigateTo({
					url: "/home/submit/submitwanted?id=" + id
				})
			},
			// 单独刷新功能
			refreshdemand(id) {
				_this.click_shake(function() {
					_this.$api.get("refreshdemand", {
						demand_type: 1,
						demand_id: id
					}).then(data => {
						uni.showToast({
							title: "刷新成功",
							icon: "none",
							duration: 500
						})
						$paginator = new _this.$paginator(_this.$api)
						_this.getdata(true)
					});
				})
			},
			// 一键刷新
			refreshdemands() {
				_this.click_shake(function() {
					_this.$api.get("refreshdemand", {
						demand_type: 2
					}).then(data => {
						uni.showToast({
							title: "刷新成功",
							icon: "none",
							duration: 500
						})
						$paginator = new _this.$paginator(_this.$api)
						_this.getdata(true)
					});
				})
			},
			// 删除信息
			cancel(id) {
				_this.$api.get("demandstatus", {
					id: id
				}).then(data => {
					uni.showToast({
						title: "操作成功",
						icon: "none",
						duration: 500
					})
					$paginator = new _this.$paginator(_this.$api)
					_this.getdata(true)
				});
			},
			// 删除信息
			deleteSupply(id) {
				wx.showModal({
					content: '确认删除',
					success(res) {
						if (res.confirm) {
							_this.$api.get("delonedemand", {
								id: id
							}).then(data => {
								uni.showToast({
									title: "操作成功",
									icon: "none",
									duration: 500
								})
								$paginator = new _this.$paginator(_this.$api)
								_this.getdata(true)
							});
						}
					}
				})
			},
			// 一键删除
			deleteall() {
				wx.showModal({
					content: '确认清空全部？',
					success(res) {
						if (res.confirm) {
							_this.$api.get("deldemand", {}).then(data => {
								$paginator = new _this.$paginator(_this.$api)
								_this.getdata(true)
							});
						}
					}
				})
			},
			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F2F2F2;
		min-height: 100vh;
	}

	.tabbar {
		padding: 20rpx 0;
		background-color: #FFFFFF;

		.item {
			flex: 1;
			text-align: center;
			font-size: 30rpx;
			color: #666666;

			.cur {
				color: #000000;
			}

			.line {
				width: 40rpx;
				height: 5rpx;
				margin: 10rpx auto;
				background: #38be8c;
				border-radius: 3rpx;
			}
		}
	}

	.wrap {
		padding: 0 25rpx;

		.total {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			padding: 13rpx 0 18rpx 25rpx;
		}

		.card {
			width: 700rpx;
			background: #ffffff;
			border-radius: 8rpx;
			padding: 40rpx 25rpx;
			margin-bottom: 24rpx;

			.goodsName {
				font-size: 30rpx;
				color: #333333;
				flex: 1;
			}

			.text {
				font-size: 24rpx;
				color: #999999;
				margin: 17rpx 0 17rpx;
			}

			.address {
				height: 60rpx;
				border-bottom: 1rpx solid #E6E6E6;
			}

			.msg {
				font-size: 22rpx;
				color: #bfbfbf;
				margin: 20rpx 0 35rpx;

				view {
					margin-right: 80rpx;
				}
			}

			.btnGroup {
				flex-direction: row-reverse;
			}

			.btn {
				min-width: 120rpx;
				height: 58rpx;
				padding: 0 10rpx;
				border-radius: 30rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 56rpx;
				font-weight: bold;
				margin-left: 30rpx;
			}

			.reOffer {
				border: 1rpx solid #FA2F2F;
				color: #FA2F2F;
			}

			.notoffer {
				color: #999999;
			}

			.edit {
				border: 1rpx solid #38BE8C;
				color: #38BE8C;
			}

			.del {
				border: 1rpx solid #E9E9E9;
				color: #000000;
			}

			.refresh {
				border: 1rpx solid #4BACFF;
				color: #4BACFF;
			}
		}
	}

	.foot {
		width: 680rpx;
		height: 90rpx;
		font-size: 34rpx;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
		line-height: 90rpx;
		position: fixed;
		bottom: 37rpx;
		left: 36rpx;
		overflow: hidden;
		border-radius: 45rpx;

		view {
			flex: 1;
			background-color: #F89935;
		}

		.green {
			background-color: #38BE8C;
		}
	}
</style>
